import React, { MutableRefObject, useRef, useState } from 'react';
import './App.css';
import ColorAnimateTextComponent from "./color-animate-text/color-animate-text.component";

function App() {

	const [flag, setFlag] = useState(true);
	const value1 = useRef(['CrimsonHu', '全栈工程师', '谁会拒绝一个有意思的文字动效呢']);
	const value2 = useRef(['我的技术栈', 'Angular+Vue+React+Java']);

	return (
		<>
			<button onClick={() => { setFlag(!flag) }}>变换</button>
			<ColorAnimateTextComponent texts={flag ? value1.current : value2.current}></ColorAnimateTextComponent>
			<div>
				当前：{flag ? value1.current.toString() : value2.current.toString()}
			</div>
		</>
	);
}

export default App;

// function App() {
//
// 	const component: any = useRef(null);
//
// 	return (
// 		<>
// 			<button onClick={() => { component.current?.getInstance().resume() }}>开始
// 			</button>
// 			<button onClick={() => { component.current?.getInstance().suspend() }}>暂停
// 			</button>
// 			<ColorAnimateTextComponent prefixString={'稀土掘金：'} texts={['CrimsonHu', '全栈工程师']}
// 									   defaultRun={false} ref={component}></ColorAnimateTextComponent>
// 		</>
// 	);
// }
//
// export default App;
